﻿<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>欢迎加入杭州凌通大家庭</title>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/page.css">
  <link rel="stylesheet" href="css/page03.css">
  <link rel="stylesheet" href="css/page04.css">
  <link rel="stylesheet" href="css/page05.css">
  <link rel="stylesheet" href="css/page06.css">
  <link rel="stylesheet" href="css/page07.css">
  <link rel="stylesheet" href="css/page08.css">
  <link rel="stylesheet" href="css/page_final.css">
  <script src="js/swiper.min.js"></script>
  <script src="js/swiper.animate.min.js"></script>
  <script src="https://cdn.bootcss.com/zepto/1.0.1/zepto.min.js"></script>
</head>

<body class="is-loading">

  <div class="loading">
    <img src="./images/loading.gif" alt="loading...">
  </div>

  <div class="title_header">
    <span>有您的日子分外美好</span>
  </div>
  <div id="audio_div">
      <audio id="mp3Btn" autoplay loop>
        <source src="./music/Lainey-Lou-Oceanside.mp3" type="audio/mpeg" />
      </audio>
 </div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      
      <!-- 第一页 -->
      <section class="swiper-slide swiper-lazy" id="page1" data-background="./images/1.png">
        <img src="./images/1-线条.png" alt="" style="width: 100%;height: 100%">
        <div class='circle'>
          <img src="./images/1-圈.png" alt="">
          <p class="ani resize step01" swiper-animate-effect="zoomIn"
              swiper-animate-duration="1s" swiper-animate-delay="0.5s"><span>杭州凌通</span><span>交车温馨提示</span></p>
        </div>
      </section>
      <!-- 第二页 -->
      <section class="swiper-slide swiper-lazy" id="page2" data-background="./images/2.png">
        <img src="./images/2-shadow.png" alt="" class="ani resize shadow" swiper-animate-effect="zoomIn"
              swiper-animate-duration="0.8s">

        <img src="./images/common_circle.png" alt="" class="ani com_circle">
        <p class="ani resize step01" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s">
            <span>第一步</span><span>交车前夕</span><span>准备工作</span></p>

        <div class="step_bar01 ">
          <img src="./images/公用-数字bg-黑.png" alt="">
          <span class="ani resize"  swiper-animate-effect="rollIn"
              swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">1</span>

          <p class="ani resize p01" swiper-animate-effect="bounceInLeft" 
              swiper-animate-duration="0.8s" swiper-animate-delay="1.2s">工作人员致电与您沟通交车事宜。</p>
          <p class="ani resize p02" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.8s" 
              swiper-animate-delay="2s">提醒您次日预留3小时左右进行交车程序。</p>
        </div>

        <div class="step_bar02">
          <img src="./images/公用-数字bg-黑.png" alt="">
          <span class="ani resize"  swiper-animate-effect="rollIn"
              swiper-animate-duration="0.5s" swiper-animate-delay="2.8s">2</span>
          
          <p class="ani resize p01" swiper-animate-effect="bounceInLeft" 
              swiper-animate-duration="0.5s" swiper-animate-delay="2.8s">准备材料</p>
          <p class="ani resize p02" swiper-animate-effect="bounceInLeft" 
              swiper-animate-duration="0.8s" swiper-animate-delay="3.3s">个人：车主身份证，合同及定金收据，指标。</p>           

          <p class="ani resize p03" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.8s" 
              swiper-animate-delay="4s">公司：营业执照副本原件，公章，开票资料。</p>
           <p class="ani resize p04" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.8s" 
          swiper-animate-delay="4.4s">车款请勿打入销售顾问个人帐户</p>
        </div>
        
      </section>
      <!-- 第三页 -->
      <section class="swiper-slide swiper-lazy" id="page3"  data-background="./images/3.png">
        <div class="ani resize show_content" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s">
          
        </div>
        <img src="./images/common_circle.png" alt="" class="ani resize com_circle" swiper-animate-effect="zoomIn" 
          swiper-animate-duration="0.5s">
        <p class="ani resize step02" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s">
            <span>第二步</span><span>交车流程</span><span>介绍说明</span>
        </p>

        <div class="step_bar01">
          <img src="./images/公用-数字bg-黑.png" alt="">
          <span class="ani resize"  swiper-animate-effect="rollIn"
              swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">1</span>

          <p class="ani resize p01" swiper-animate-effect="bounceInLeft" 
              swiper-animate-duration="0.8s" swiper-animate-delay="1.2s">您的销售顾问向您提供交车流程清单</p>
        </div>
        <div class="step_bar02">
          <img src="./images/公用-数字bg-黑.png" alt="">
          <span class="ani resize"  swiper-animate-effect="rollIn"
              swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">2</span>
          
          <p class="ani resize p01" swiper-animate-effect="bounceInLeft" 
              swiper-animate-duration="0.8s" swiper-animate-delay="1.2s">说明交车流程和时间内容（约3分钟）</p>
        </div>
      </section>
      <!-- 第四页 -->
      <section class="swiper-slide swiper-lazy" id="page4" data-background="./images/4.png">
          <div class="ani resize show_content" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s"></div>
          <img src="./images/4-8标题圈圈.png" alt="" class="ani resize com_circle" swiper-animate-effect="zoomIn" 
            swiper-animate-duration="0.5s">
          <p class="ani resize step03" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s">
              <span>第三步</span><span>环车检查</span><span>工具点检</span>
          </p>

          <div class="step_bar01">
            <img src="./images/公用-数字bg-白.png" alt="">
            <span class="ani resize"  swiper-animate-effect="rollIn"
                swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">1</span>

            <p class="ani resize p01" swiper-animate-effect="rollIn" 
                swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">车辆内外绕车检查</p>
          </div>
          <div class="step_bar02">
            <img src="./images/公用-数字bg-白.png" alt="">
            <span class="ani resize"  swiper-animate-effect="rollIn"
                swiper-animate-duration="0.5s" swiper-animate-delay="1.7s">2</span>
            
            <p class="ani resize p01" swiper-animate-effect="rollIn" 
                swiper-animate-duration="0.5s" swiper-animate-delay="2.2s">点交工具配件备胎</p>
          </div>
      </section>
      
      <!-- 第五页 -->
      <section class="swiper-slide swiper-lazy" id="page5" data-background="./images/5.png">
          <div class="ani resize show_content" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s"></div>
          <img src="./images//4-8标题圈圈.png" alt="" class="ani resize com_circle" swiper-animate-effect="zoomIn" 
            swiper-animate-duration="0.5s">
          <p class="ani resize step04" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s">
              <span>第四步</span><span>车款缴纳</span><span>开具发票</span>
          </p>

          <div class="step_bar01">
            <img src="./images/公用-数字bg-白.png" alt="">
            <span class="ani resize"  swiper-animate-effect="rollIn"
                swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">1</span>

            <p class="ani resize p01" swiper-animate-effect="bounceInLeft" 
                swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">根据之前的费用明细，请您交付相应的款项</p>
          </div>
          <div class="step_bar02">
            <img src="./images/公用-数字bg-白.png" alt="">
            <span class="ani resize"  swiper-animate-effect="rollIn"
                swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">2</span>
            
            <p class="ani resize p02" swiper-animate-effect="bounceInLeft" 
                swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">新车发票开具大约等待15分左右</p>
          </div>
      </section>

      <!-- 第六页 -->
      <section class="swiper-slide swiper-lazy" id="page6" data-background="./images/6.png">
          <div class="ani resize show_content" swiper-animate-effect="zoomIn" swiper-animate-duration="1.1s"></div>
          <img src="./images//4-8标题圈圈.png" alt="" class="ani resize com_circle" >
          <p class="ani resize step05" swiper-animate-effect="zoomIn" swiper-animate-duration="1s">
              <span>第五步</span><span>办理保险</span><span>介绍售后</span><span>交接手续</span>
          </p>

          <div class="step_bar01">
            <img src="./images/公用-数字bg-白.png" alt="">
            <span class="ani resize"  swiper-animate-effect="rollIn"
                swiper-animate-duration="0.5s" swiper-animate-delay="1.3s">1</span>

            <p class="ani resize p01" swiper-animate-effect="zoomIn" 
                swiper-animate-duration="0.8s" swiper-animate-delay="1.1s">爱车购买的保险，约30分钟等待期间，顾问服务介绍保修保养政策及新车使用指导</p>
          </div>
          <div class="step_bar02">
            <img src="./images/公用-数字bg-白.png" alt="" swiper-animate-effect="zoomIn"
                swiper-animate-duration="0.2s" swiper-animate-delay="1.3s">
            <span class="ani resize"  swiper-animate-effect="rollIn"
                swiper-animate-duration="0.5s" swiper-animate-delay="1.4s">2</span>
            
            <p class="ani resize p01" swiper-animate-effect="zoomIn" 
                swiper-animate-duration="0.8s" swiper-animate-delay="2s">交接相关的购车票据及手续（车辆手续、保单、使用手册、交车确认表等）</p>
          </div>
          <!-- <div class="step_bar03">
            <img src="./images/公用-数字bg-白.png" alt="">
            <span class="ani resize"  swiper-animate-effect="rollIn"
                swiper-animate-duration="0.5s" swiper-animate-delay="1.4s">3</span>
            
            <p class="ani resize p01" swiper-animate-effect="zoomIn" 
                swiper-animate-duration="0.8s" swiper-animate-delay="2s">上牌人员全程陪同您办理购置税、上牌等业务，大约耗时1个工作日</p>
          </div> -->
      </section>

      <!-- 第七页 -->
      <section class="swiper-slide swiper-lazy" id="page7" data-background="./images/7.png">
          <img src="./images//4-8标题圈圈.png" alt="" class="ani resize com_circle" swiper-animate-effect="zoomIn" 
            swiper-animate-duration="0.5s">
          <p class="ani resize step06" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s">
              <span>第六步</span><span>功能讲解</span><span>客服面访</span>
          </p>

          <div class="step_bar01">
            <img src="./images/公用-数字bg-白.png" alt="">
            <span class="ani resize"  swiper-animate-effect="rollIn"
                swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">1</span>

            <p class="ani resize p01" swiper-animate-effect="bounceInLeft" 
                swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">
                <span>  销售顾问会为您详细介绍爱车的</span><span> 功能配置及主要驾驶注意事项</span></p>
          </div>
          <div class="step_bar02">
            <img src="./images/公用-数字bg-白.png" alt="">
            <span class="ani resize"  swiper-animate-effect="rollIn"
                swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">2</span>
            
            <p class="ani resize p01" swiper-animate-effect="bounceInLeft" 
                swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">客服专员与您进行满意度访谈约5分钟</p>
          </div>
      </section>

      <!-- 第八页 -->
      <section class="swiper-slide swiper-lazy" id="page8" data-background="./images/8.png">
          <div class="ani resize show_content" swiper-animate-effect="zoomIn" swiper-animate-duration="1.1s"></div>
          <img src="./images/4-8标题圈圈.png" alt="" class="ani resize com_circle" swiper-animate-effect="zoomIn" 
            swiper-animate-duration="0.5s">
          <p class="ani resize step07" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s">
              <span>第七步</span><span>交车仪式</span><span>送别客户</span>
          </p>

          <div class="step_bar01">
            <img src="./images/公用-数字bg-白.png" alt="">
            <span class="ani resize"  swiper-animate-effect="rollIn"
                swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">1</span>
            <div class="lines"></div>
            <div class="ani resize p01" swiper-animate-effect="bounceIn" 
                swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">届时销售/服务/客服人员将参与新车交车仪式</div>
          </div>
          <div class="step_bar02">
            <img src="./images/公用-数字bg-白.png" alt="">
            <span class="ani resize"  swiper-animate-effect="rollIn"
                swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">2</span>
            <div class="lines"></div>
            <div class="ani resize p01" swiper-animate-effect="bounceIn" 
                swiper-animate-duration="0.8s" swiper-animate-delay="0.8s">与您的新车合影留念，记录交车的美好时刻。</div>
          </div>
      </section>

      <!-- 第九页 -->
      <section class="swiper-slide swiper-lazy" id="page9" data-background="./images/9.png">
          <img src="./images/logo.png" alt="" class="ani resize" swiper-animate-effect="fadeIn" 
                swiper-animate-duration="0.8s" swiper-animate-delay="1.8s">
          <p class="ani resize" swiper-animate-effect="zoomIn" swiper-animate-duration="1.8s">
            <span>感谢您的评价</span>
            <span>是我们不断前进的动力！</span>
            <span>厂方电话调研拜托</span>
            <span>请给我们“10分”的肯定。</span>
            <span>如果您对我们的服务感到满意，</span>
            <span>拜托您每项都给我们</span>
            <span>“超乎想象的满意”</span>
            <span>再次感谢!</span>
          </p>
      </section>

      <!-- 第十页 -->
      <section class="swiper-slide swiper-lazy" id="page10"  data-background="./images/10.png">
            <div class="rotate">
                <img src="./images/10-圈.png" alt="">
                 <div class="text">
                  <div class="ani resize top" swiper-animate-effect="bounceIn" swiper-animate-duration="1s">恭喜您</div>
                  <div class="bot">
                    <span class="ani resize p01" swiper-animate-effect="bounceInLeft" 
                    swiper-animate-duration="1s" swiper-animate-delay="0.5s">成为杭州凌通</span>
                    <span class="ani resize p02" swiper-animate-effect="bounceInRight" 
                    swiper-animate-duration="1s" swiper-animate-delay="0.5s">雷克萨斯尊贵车主</span>
                  </div>
              </div>
            </div>
            <div class="footer ani resize" swiper-animate-effect="fadeInLeft"
              swiper-animate-duration="2s" swiper-animate-delay="1s">
              <p>销售热线：82390000</p>
              <p>服务热线：82392222</p>
            </div>
      </section>
    </div>
    
    <img src="images/上箭头.png" style="width:20px;height:15px; bottom: 10px; left:calc(50% - 10px);" id="array" class="resize">

    <p id="progress">
        <span id="line"></span>
        <span id="page">
          <span id="page_show">1</span><span>/10</span>
        </span>
    </p>
  </div>

  <script type="text/javascript" src="./js/index.js"></script>
</body>

</html>